<template>
  <el-dialog :title="title" :width="width" :visible="visible" @close="closeDialog" align-center
    :destroy-on-close="true">
    <template #header>
      <div class="dialog-header">
        <slot name="header">{{ title }}</slot>
      </div>
    </template>
    <div class="dialog-content">
      <slot name="content"></slot>
    </div>
    <template v-slot:footer>
      <div class="dialog-footer">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="confirmAction">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';

const props = defineProps<{
  title: string;
  width: string;
  visible: boolean;
}>();

const emits = defineEmits<{
  (event: 'close'): void;
  (event: 'confirm'): void;
}>();

const closeDialog = () => {
  emits('close');
};

const confirmAction = () => {
  emits('confirm');
};
</script>

<style scoped lang="scss">
.dialog-footer {
  text-align: center;
}
</style>
